<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站幸运抽奖页面样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #7C3AED;
      --secondary: #EC4899;
      --accent: #F59E0B;
      --success: #10B981;
      --dark: #1F2937;
      --light: #F9FAFB;
      --white: #FFFFFF;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      --gradient-primary: linear-gradient(135deg, #7C3AED, #EC4899);
      --gradient-secondary: linear-gradient(135deg, #F59E0B, #EF4444);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #FAF5FF;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }
    
    /* 通用样式 */
    .prize-draw-page {
      display: none;
      padding-bottom: 80px;
    }
    
    .prize-draw-page.active {
      display: block;
      animation: fadeIn 0.5s ease;
    }
    
    .page-header {
      padding: 20px 16px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }
    
    .header-content {
      position: relative;
      z-index: 1;
      color: var(--white);
    }
    
    .page-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .page-subtitle {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .countdown {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 13px;
      margin-top: 12px;
    }
    
    .content {
      padding: 0 16px;
    }
    
    .btn {
      display: block;
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 12px;
    }
    
    .btn-primary {
      background: var(--gradient-primary);
      color: white;
      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    }
    
    .btn-secondary {
      background: var(--gradient-secondary);
      color: white;
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    }
    
    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }
    
    .btn-outline {
      background-color: transparent;
      color: var(--primary);
      border: 1px solid var(--primary);
    }
    
    .btn-outline:hover {
      background-color: rgba(124, 58, 237, 0.05);
    }
    
    .section {
      margin-bottom: 24px;
      background-color: var(--white);
      border-radius: 16px;
      padding: 20px;
      box-shadow: var(--shadow);
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .section-title i {
      color: var(--primary);
    }
    
    /* 抽奖次数样式 */
    .draw-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background-color: rgba(124, 58, 237, 0.1);
      color: var(--primary);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 奖品列表样式 */
    .prizes-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    
    .prize-item {
      background-color: var(--light);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    
    .prize-item.highlight {
      border: 2px solid var(--accent);
    }
    
    .prize-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      border-radius: 50%;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .prize-icon img {
      width: 36px;
      height: 36px;
      object-fit: contain;
    }
    
    .prize-name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }
    
    .prize-chance {
      font-size: 12px;
      color: var(--gray);
    }
    
    .prize-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: var(--accent);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }
    
    /* 抽奖记录样式 */
    .records-list {
      max-height: 200px;
      overflow-y: auto;
      padding-right: 8px;
    }
    
    .record-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--light-gray);
    }
    
    .record-item:last-child {
      border-bottom: none;
    }
    
    .record-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .record-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .record-info {
      flex: 1;
    }
    
    .record-user {
      font-weight: 500;
      font-size: 14px;
      margin-bottom: 2px;
    }
    
    .record-prize {
      font-size: 13px;
      color: var(--gray);
    }
    
    .record-time {
      font-size: 12px;
      color: var(--gray);
      white-space: nowrap;
    }
    
    /* 1. 转盘抽奖样式 */
    .wheel-container {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 0 auto 24px;
    }
    
    .prize-wheel {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      border: 8px solid white;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    }
    
    .wheel-section {
      position: absolute;
      width: 50%;
      height: 50%;
      transform-origin: bottom right;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .wheel-section-content {
      position: absolute;
      width: 100px;
      text-align: center;
      transform-origin: center;
      font-size: 12px;
      font-weight: 600;
      color: white;
      transform: rotate(45deg) translate(0, -30px);
    }
    
    .wheel-pointer {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 30px;
      background-color: var(--accent);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      z-index: 10;
    }
    
    .wheel-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
      z-index: 5;
      cursor: pointer;
    }
    
    /* 2. 砸金蛋样式 */
    .eggs-container {
      display: flex;
      justify-content: space-around;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 16px;
    }
    
    .golden-egg {
      width: 100px;
      height: 120px;
      position: relative;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    
    .golden-egg:hover {
      transform: scale(1.05);
    }
    
    .egg-shell {
      width: 100%;
      height: 100%;
      background-color: #FFD700;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      position: relative;
      box-shadow: inset -15px -15px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .egg-shell:before {
      content: '';
      position: absolute;
      top: 30%;
      left: 0;
      width: 100%;
      height: 10px;
      background-color: rgba(255, 255, 255, 0.3);
      transform: rotate(-15deg);
    }
    
    .egg-shadow {
      position: absolute;
      bottom: -10px;
      left: 10%;
      width: 80%;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
    }
    
    .egg-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(0, 0, 0, 0.6);
      font-weight: 700;
      font-size: 20px;
    }
    
    /* 3. 翻牌抽奖样式 */
    .cards-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .prize-card {
      aspect-ratio: 3/4;
      perspective: 1000px;
      cursor: pointer;
    }
    
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    
    .prize-card.flipped .card-inner {
      transform: rotateY(180deg);
    }
    
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .card-front {
      background: var(--gradient-primary);
      color: white;
      font-size: 24px;
      font-weight: 700;
    }
    
    .card-back {
      background-color: white;
      transform: rotateY(180deg);
      padding: 12px;
      text-align: center;
    }
    
    /* 4. 摇一摇抽奖样式 */
    .shake-container {
      text-align: center;
      padding: 20px 0;
      margin-bottom: 24px;
    }
    
    .shake-device {
      width: 180px;
      height: 180px;
      margin: 0 auto 24px;
      position: relative;
    }
    
    .shake-box {
      width: 100%;
      height: 100%;
      border-radius: 24px;
      background: var(--gradient-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
    }
    
    .shake-icon {
      font-size: 48px;
      color: white;
      animation: bounce 2s infinite;
    }
    
    .shake-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 8px;
    }
    
    .shake-subtext {
      font-size: 13px;
      color: var(--gray);
    }
    
    .shake-animation {
      animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    /* 5. 签到抽奖样式 */
    .checkin-calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
      margin-bottom: 24px;
    }
    
    .calendar-day {
      aspect-ratio: 1/1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
    }
    
    .calendar-day.weekday {
      color: var(--gray);
      font-size: 12px;
      font-weight: normal;
    }
    
    .calendar-day.unchecked {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }
    
    .calendar-day.checked {
      background-color: var(--primary);
      color: white;
      position: relative;
    }
    
    .calendar-day.checked:after {
      content: "✓";
      position: absolute;
      font-size: 16px;
    }
    
    .calendar-day.today {
      border: 2px solid var(--accent);
      color: var(--accent);
      background-color: white;
    }
    
    .checkin-rewards {
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding-bottom: 8px;
      margin-bottom: 24px;
    }
    
    .checkin-reward {
      min-width: 100px;
      background-color: var(--light);
      border-radius: 12px;
      padding: 16px 12px;
      text-align: center;
      flex-shrink: 0;
    }
    
    .checkin-reward.achieved {
      background-color: rgba(16, 185, 129, 0.1);
      border: 1px solid var(--success);
    }
    
    .reward-days {
      font-size: 12px;
      color: var(--gray);
      margin-bottom: 8px;
    }
    
    .reward-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 8px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .reward-icon img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    
    .reward-name {
      font-size: 13px;
      font-weight: 500;
    }
    
    /* 抽奖结果弹窗 */
    .result-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .result-modal.show {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 20px;
      width: 90%;
      max-width: 320px;
      padding: 30px 20px;
      text-align: center;
      position: relative;
      transform: translateY(30px);
      transition: transform 0.3s ease;
    }
    
    .result-modal.show .modal-content {
      transform: translateY(0);
    }
    
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 20px;
      color: var(--gray);
      cursor: pointer;
    }
    
    .result-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .result-icon.success {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--success);
    }
    
    .result-icon.fail {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .result-icon i {
      font-size: 40px;
    }
    
    .result-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    
    .result-description {
      font-size: 15px;
      color: var(--gray);
      margin-bottom: 24px;
      line-height: 1.6;
    }
    
    .result-prize {
      background-color: var(--light);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .prize-image {
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .prize-image img {
      width: 36px;
      height: 36px;
      object-fit: contain;
    }
    
    .prize-name-large {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
      color: var(--dark);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--dark);
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes shake {
      10%, 90% { transform: translateX(-2px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60% { transform: translateX(4px); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .page-title {
        font-size: 22px;
      }
      
      .prize-item {
        padding: 12px;
      }
      
      .prize-icon {
        width: 50px;
        height: 50px;
      }
      
      .golden-egg {
        width: 90px;
        height: 110px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">抽奖页面样式</div>
    <div class="switcher-option active" data-style="1">幸运大转盘</div>
    <div class="switcher-option" data-style="2">砸金蛋抽奖</div>
    <div class="switcher-option" data-style="3">翻牌赢好礼</div>
    <div class="switcher-option" data-style="4">摇一摇抽奖</div>
    <div class="switcher-option" data-style="5">签到抽奖</div>
  </div>
  
  <!-- 抽奖结果弹窗 -->
  <div class="result-modal" id="resultModal">
    <div class="modal-content">
      <button class="modal-close" id="modalClose"><i class="fa fa-times"></i></button>
      <div class="result-icon success" id="resultIcon">
        <i class="fa fa-trophy"></i>
      </div>
      <h3 class="result-title" id="resultTitle">恭喜您中奖了！</h3>
      <p class="result-description" id="resultDescription">
        您成功抽中了精美礼品，快去领取吧！
      </p>
      <div class="result-prize" id="resultPrize">
        <div class="prize-image">
          <img src="https://picsum.photos/id/26/100" alt="奖品图片">
        </div>
        <div class="prize-name-large">100元代金券</div>
        <div class="prize-chance">有效期至2023-12-31</div>
      </div>
      <button class="btn btn-primary" id="claimPrize">立即领取</button>
    </div>
  </div>
  
  <div class="container">
    <!-- 1. 幸运大转盘样式 -->
    <div class="prize-draw-page active" id="style1">
      <div class="page-header">
        <div class="header-bg" style="background: var(--gradient-primary);"></div>
        <div class="header-content">
          <h1 class="page-title">幸运大转盘</h1>
          <p class="page-subtitle">每日有3次抽奖机会，好礼转不停</p>
          <div class="countdown">
            <i class="fa fa-clock-o"></i>
            <span>活动剩余: 5天8小时</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="draw-count">
          <i class="fa fa-ticket"></i>
          <span>今日剩余抽奖次数: 3次</span>
        </div>
        
        <div class="wheel-container">
          <div class="prize-wheel" id="prizeWheel">
            <div class="wheel-section" style="background-color: #7C3AED; transform: rotate(0deg);">
              <div class="wheel-section-content">10元代金券</div>
            </div>
            <div class="wheel-section" style="background-color: #EC4899; transform: rotate(45deg);">
              <div class="wheel-section-content">谢谢参与</div>
            </div>
            <div class="wheel-section" style="background-color: #F59E0B; transform: rotate(90deg);">
              <div class="wheel-section-content">50元代金券</div>
            </div>
            <div class="wheel-section" style="background-color: #10B981; transform: rotate(135deg);">
              <div class="wheel-section-content">20元代金券</div>
            </div>
            <div class="wheel-section" style="background-color: #3B82F6; transform: rotate(180deg);">
              <div class="wheel-section-content">iPhone 14</div>
            </div>
            <div class="wheel-section" style="background-color: #6366F1; transform: rotate(225deg);">
              <div class="wheel-section-content">5元代金券</div>
            </div>
            <div class="wheel-section" style="background-color: #8B5CF6; transform: rotate(270deg);">
              <div class="wheel-section-content">谢谢参与</div>
            </div>
            <div class="wheel-section" style="background-color: #A855F7; transform: rotate(315deg);">
              <div class="wheel-section-content">100元代金券</div>
            </div>
            <div class="wheel-pointer"></div>
            <div class="wheel-center" id="wheelSpinBtn">
              <i class="fa fa-refresh"></i>
            </div>
          </div>
        </div>
        
        <button class="btn btn-primary" id="startDraw1">开始抽奖</button>
        <button class="btn btn-outline">获取更多抽奖次数</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-gift"></i> 奖品设置
          </h2>
          <div class="prizes-list">
            <div class="prize-item highlight">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/96/100" alt="iPhone">
              </div>
              <div class="prize-name">iPhone 14</div>
              <div class="prize-chance">中奖概率 0.1%</div>
              <div class="prize-tag">特等奖</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/26/100" alt="100元代金券">
              </div>
              <div class="prize-name">100元代金券</div>
              <div class="prize-chance">中奖概率 5%</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/27/100" alt="50元代金券">
              </div>
              <div class="prize-name">50元代金券</div>
              <div class="prize-chance">中奖概率 10%</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/28/100" alt="20元代金券">
              </div>
              <div class="prize-name">20元代金券</div>
              <div class="prize-chance">中奖概率 20%</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-history"></i> 最近中奖记录
          </h2>
          <div class="records-list">
            <div class="record-item">
              <div class="record-avatar">
                <img src="https://picsum.photos/id/64/100" alt="用户头像">
              </div>
              <div class="record-info">
                <div class="record-user">张先生</div>
                <div class="record-prize">抽中了 50元代金券</div>
              </div>
              <div class="record-time">10分钟前</div>
            </div>
            <div class="record-item">
              <div class="record-avatar">
                <img src="https://picsum.photos/id/65/100" alt="用户头像">
              </div>
              <div class="record-info">
                <div class="record-user">李女士</div>
                <div class="record-prize">抽中了 20元代金券</div>
              </div>
              <div class="record-time">30分钟前</div>
            </div>
            <div class="record-item">
              <div class="record-avatar">
                <img src="https://picsum.photos/id/66/100" alt="用户头像">
              </div>
              <div class="record-info">
                <div class="record-user">王先生</div>
                <div class="record-prize">抽中了 10元代金券</div>
              </div>
              <div class="record-time">1小时前</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 2. 砸金蛋抽奖样式 -->
    <div class="prize-draw-page" id="style2">
      <div class="page-header">
        <div class="header-bg" style="background: var(--gradient-secondary);"></div>
        <div class="header-content">
          <h1 class="page-title">砸金蛋赢大奖</h1>
          <p class="page-subtitle">选择金蛋砸开，惊喜好礼等你拿</p>
          <div class="countdown">
            <i class="fa fa-clock-o"></i>
            <span>活动剩余: 3天12小时</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="draw-count">
          <i class="fa fa-hammer"></i>
          <span>今日剩余砸蛋次数: 2次</span>
        </div>
        
        <div class="eggs-container">
          <div class="golden-egg" data-egg="1">
            <div class="egg-shell">
              <div class="egg-number">1</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
          <div class="golden-egg" data-egg="2">
            <div class="egg-shell">
              <div class="egg-number">2</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
          <div class="golden-egg" data-egg="3">
            <div class="egg-shell">
              <div class="egg-number">3</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
        </div>
        
        <div class="eggs-container">
          <div class="golden-egg" data-egg="4">
            <div class="egg-shell">
              <div class="egg-number">4</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
          <div class="golden-egg" data-egg="5">
            <div class="egg-shell">
              <div class="egg-number">5</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
          <div class="golden-egg" data-egg="6">
            <div class="egg-shell">
              <div class="egg-number">6</div>
            </div>
            <div class="egg-shadow"></div>
          </div>
        </div>
        
        <button class="btn btn-secondary">分享好友额外获得1次机会</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-list-alt"></i> 奖项设置
          </h2>
          <div class="prizes-list">
            <div class="prize-item highlight">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/20/100" alt="笔记本电脑">
              </div>
              <div class="prize-name">笔记本电脑</div>
              <div class="prize-chance">1名幸运用户</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/21/100" alt="无线耳机">
              </div>
              <div class="prize-name">无线耳机</div>
              <div class="prize-chance">10名幸运用户</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/22/100" alt="充电宝">
              </div>
              <div class="prize-name">充电宝</div>
              <div class="prize-chance">50名幸运用户</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/23/100" alt="优惠券">
              </div>
              <div class="prize-name">20元优惠券</div>
              <div class="prize-chance">1000名幸运用户</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 3. 翻牌赢好礼样式 -->
    <div class="prize-draw-page" id="style3">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #3B82F6, #6366F1);"></div>
        <div class="header-content">
          <h1 class="page-title">翻牌赢好礼</h1>
          <p class="page-subtitle">翻开卡牌，看看你能获得什么惊喜</p>
          <div class="countdown">
            <i class="fa fa-clock-o"></i>
            <span>活动剩余: 7天5小时</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="draw-count">
          <i class="fa fa-clone"></i>
          <span>今日剩余翻牌次数: 5次</span>
        </div>
        
        <div class="cards-container">
          <div class="prize-card" data-card="1">
            <div class="card-inner">
              <div class="card-front">1</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/28/100" alt="20元代金券">
                </div>
                <div class="prize-name">20元代金券</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="2">
            <div class="card-inner">
              <div class="card-front">2</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/30/100" alt="谢谢参与">
                </div>
                <div class="prize-name">谢谢参与</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="3">
            <div class="card-inner">
              <div class="card-front">3</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/29/100" alt="5元代金券">
                </div>
                <div class="prize-name">5元代金券</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="4">
            <div class="card-inner">
              <div class="card-front">4</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/26/100" alt="100元代金券">
                </div>
                <div class="prize-name">100元代金券</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="5">
            <div class="card-inner">
              <div class="card-front">5</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/25/100" alt="电影票">
                </div>
                <div class="prize-name">电影票一张</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="6">
            <div class="card-inner">
              <div class="card-front">6</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/30/100" alt="谢谢参与">
                </div>
                <div class="prize-name">谢谢参与</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="7">
            <div class="card-inner">
              <div class="card-front">7</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/27/100" alt="50元代金券">
                </div>
                <div class="prize-name">50元代金券</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="8">
            <div class="card-inner">
              <div class="card-front">8</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/30/100" alt="谢谢参与">
                </div>
                <div class="prize-name">谢谢参与</div>
              </div>
            </div>
          </div>
          <div class="prize-card" data-card="9">
            <div class="card-inner">
              <div class="card-front">9</div>
              <div class="card-back">
                <div class="prize-icon">
                  <img src="https://picsum.photos/id/24/100" alt="咖啡券">
                </div>
                <div class="prize-name">咖啡券一张</div>
              </div>
            </div>
          </div>
        </div>
        
        <button class="btn btn-primary" id="resetCards">重置卡牌</button>
        <button class="btn btn-outline">查看我的奖品</button>
      </div>
    </div>
    
    <!-- 4. 摇一摇抽奖样式 -->
    <div class="prize-draw-page" id="style4">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #10B981, #059669);"></div>
        <div class="header-content">
          <h1 class="page-title">摇一摇抽奖</h1>
          <p class="page-subtitle">摇动手机，惊喜好礼等你拿</p>
          <div class="countdown">
            <i class="fa fa-clock-o"></i>
            <span>活动剩余: 2天18小时</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="draw-count">
          <i class="fa fa-mobile"></i>
          <span>今日剩余摇动次数: 4次</span>
        </div>
        
        <div class="shake-container">
          <div class="shake-device">
            <div class="shake-box" id="shakeBox">
              <i class="fa fa-random shake-icon"></i>
            </div>
          </div>
          <div class="shake-text">摇一摇手机赢取大奖</div>
          <div class="shake-subtext">或点击下方按钮模拟摇动</div>
        </div>
        
        <button class="btn btn-primary" id="shakeBtn">点击摇一摇</button>
        <button class="btn btn-outline">查看中奖攻略</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-trophy"></i> 热门奖品
          </h2>
          <div class="prizes-list">
            <div class="prize-item highlight">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/96/100" alt="智能手机">
              </div>
              <div class="prize-name">智能手机</div>
              <div class="prize-chance">3台</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/21/100" alt="无线耳机">
              </div>
              <div class="prize-name">无线耳机</div>
              <div class="prize-chance">20个</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/22/100" alt="充电宝">
              </div>
              <div class="prize-name">充电宝</div>
              <div class="prize-chance">50个</div>
            </div>
            <div class="prize-item">
              <div class="prize-icon">
                <img src="https://picsum.photos/id/26/100" alt="100元代金券">
              </div>
              <div class="prize-name">100元代金券</div>
              <div class="prize-chance">200张</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-bullhorn"></i> 活动规则
          </h2>
          <div class="page-description" style="text-align: left; margin-bottom: 0; font-size: 14px;">
            <p>1. 每日可参与4次摇一摇抽奖活动</p>
            <p>2. 分享活动给好友可额外获得2次抽奖机会</p>
            <p>3. 中奖后请在7天内完成兑奖，逾期失效</p>
            <p>4. 同一用户不可重复领取同一奖品</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 5. 签到抽奖样式 -->
    <div class="prize-draw-page" id="style5">
      <div class="page-header">
        <div class="header-bg" style="background: linear-gradient(135deg, #F97316, #EA580C);"></div>
        <div class="header-content">
          <h1 class="page-title">签到抽奖</h1>
          <p class="page-subtitle">连续签到赢取丰厚奖励</p>
          <div class="countdown">
            <i class="fa fa-calendar"></i>
            <span>本月已签到: 12天</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <button class="btn btn-secondary" id="checkinBtn">今日签到 +1</button>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-calendar-check-o"></i> 本月签到日历
          </h2>
          <div class="checkin-calendar">
            <div class="calendar-day weekday">一</div>
            <div class="calendar-day weekday">二</div>
            <div class="calendar-day weekday">三</div>
            <div class="calendar-day weekday">四</div>
            <div class="calendar-day weekday">五</div>
            <div class="calendar-day weekday">六</div>
            <div class="calendar-day weekday">日</div>
            
            <div class="calendar-day checked">1</div>
            <div class="calendar-day checked">2</div>
            <div class="calendar-day checked">3</div>
            <div class="calendar-day">4</div>
            <div class="calendar-day checked">5</div>
            <div class="calendar-day checked">6</div>
            <div class="calendar-day checked">7</div>
            
            <div class="calendar-day checked">8</div>
            <div class="calendar-day checked">9</div>
            <div class="calendar-day">10</div>
            <div class="calendar-day checked">11</div>
            <div class="calendar-day checked">12</div>
            <div class="calendar-day today">13</div>
            <div class="calendar-day unchecked">14</div>
            
            <div class="calendar-day unchecked">15</div>
            <div class="calendar-day unchecked">16</div>
            <div class="calendar-day unchecked">17</div>
            <div class="calendar-day unchecked">18</div>
            <div class="calendar-day unchecked">19</div>
            <div class="calendar-day unchecked">20</div>
            <div class="calendar-day unchecked">21</div>
            
            <div class="calendar-day unchecked">22</div>
            <div class="calendar-day unchecked">23</div>
            <div class="calendar-day unchecked">24</div>
            <div class="calendar-day unchecked">25</div>
            <div class="calendar-day unchecked">26</div>
            <div class="calendar-day unchecked">27</div>
            <div class="calendar-day unchecked">28</div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-gift"></i> 签到奖励
          </h2>
          <div class="checkin-rewards">
            <div class="checkin-reward achieved">
              <div class="reward-days">连续3天</div>
              <div class="reward-icon">
                <img src="https://picsum.photos/id/28/100" alt="20元代金券">
              </div>
              <div class="reward-name">20元代金券</div>
            </div>
            <div class="checkin-reward achieved">
              <div class="reward-days">连续7天</div>
              <div class="reward-icon">
                <img src="https://picsum.photos/id/24/100" alt="咖啡券">
              </div>
              <div class="reward-name">咖啡券一张</div>
            </div>
            <div class="checkin-reward">
              <div class="reward-days">连续15天</div>
              <div class="reward-icon">
                <img src="https://picsum.photos/id/27/100" alt="50元代金券">
              </div>
              <div class="reward-name">50元代金券</div>
            </div>
            <div class="checkin-reward">
              <div class="reward-days">连续25天</div>
              <div class="reward-icon">
                <img src="https://picsum.photos/id/21/100" alt="无线耳机">
              </div>
              <div class="reward-name">无线耳机</div>
            </div>
            <div class="checkin-reward">
              <div class="reward-days">全月签到</div>
              <div class="reward-icon">
                <img src="https://picsum.photos/id/96/100" alt="智能手机">
              </div>
              <div class="reward-name">智能手机</div>
            </div>
          </div>
        </div>
        
        <div class="section">
          <h2 class="section-title">
            <i class="fa fa-info-circle"></i> 活动说明
          </h2>
          <div class="page-description" style="text-align: left; margin-bottom: 0; font-size: 14px;">
            <p>1. 每日签到可获得1次抽奖机会</p>
            <p>2. 连续签到天数越多，奖励越丰厚</p>
            <p>3. 每月1日重置签到记录和奖励</p>
            <p>4. 漏签可通过完成任务补签</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的样式
    let currentStyle = '1';
    let isSpinning = false;
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const drawPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5')
    };
    const resultModal = document.getElementById('resultModal');
    const modalClose = document.getElementById('modalClose');
    const claimPrize = document.getElementById('claimPrize');
    const resultTitle = document.getElementById('resultTitle');
    const resultDescription = document.getElementById('resultDescription');
    const resultIcon = document.getElementById('resultIcon');
    const resultPrize = document.getElementById('resultPrize');
    
    // 切换抽奖页面样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(drawPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (drawPages[style]) {
        drawPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示抽奖结果
    function showResult(isWin = true, prize = {}) {
      if (isWin) {
        resultIcon.className = 'result-icon success';
        resultIcon.innerHTML = '<i class="fa fa-trophy"></i>';
        resultTitle.textContent = '恭喜您中奖了！';
        
        if (prize.name) {
          resultDescription.textContent = `您成功抽中了${prize.name}，快去领取吧！`;
          resultPrize.querySelector('.prize-name-large').textContent = prize.name;
          
          if (prize.image) {
            resultPrize.querySelector('img').src = prize.image;
          }
        } else {
          resultDescription.textContent = '您成功抽中了精美礼品，快去领取吧！';
        }
        
        resultPrize.style.display = 'block';
      } else {
        resultIcon.className = 'result-icon fail';
        resultIcon.innerHTML = '<i class="fa fa-meh-o"></i>';
        resultTitle.textContent = '很遗憾未中奖';
        resultDescription.textContent = '不要灰心，再试一次吧！您还有多次抽奖机会。';
        resultPrize.style.display = 'none';
      }
      
      resultModal.classList.add('show');
    }
    
    // 幸运大转盘抽奖
    function spinWheel() {
      if (isSpinning) return;
      
      isSpinning = true;
      const wheel = document.getElementById('prizeWheel');
      
      // 随机旋转角度 (3-5圈 + 随机位置)
      const baseRotation = 360 * (3 + Math.random() * 2);
      const randomRotation = Math.floor(Math.random() * 360);
      const totalRotation = baseRotation + randomRotation;
      
      wheel.style.transform = `rotate(${totalRotation}deg)`;
      
      // 抽奖结果 (70%概率中奖)
      setTimeout(() => {
        isSpinning = false;
        
        const prizes = [
          { name: '10元代金券', image: 'https://picsum.photos/id/28/100' },
          { name: '50元代金券', image: 'https://picsum.photos/id/27/100' },
          { name: '20元代金券', image: 'https://picsum.photos/id/28/100' },
          { name: 'iPhone 14', image: 'https://picsum.photos/id/96/100' },
          { name: '5元代金券', image: 'https://picsum.photos/id/29/100' },
          { name: '100元代金券', image: 'https://picsum.photos/id/26/100' }
        ];
        
        if (Math.random() > 0.3) {
          const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
          showResult(true, randomPrize);
        } else {
          showResult(false);
        }
      }, 5000);
    }
    
    // 砸金蛋抽奖
    function crackEgg(eggElement) {
      // 模拟蛋破碎效果
      eggElement.querySelector('.egg-shell').style.background = 'url(https://picsum.photos/id/1015/100) center center';
      eggElement.querySelector('.egg-shell').style.backgroundSize = 'cover';
      eggElement.querySelector('.egg-number').style.display = 'none';
      
      // 禁用再次点击
      eggElement.style.pointerEvents = 'none';
      
      // 显示结果
      setTimeout(() => {
        const prizes = [
          { name: '笔记本电脑', image: 'https://picsum.photos/id/20/100' },
          { name: '无线耳机', image: 'https://picsum.photos/id/21/100' },
          { name: '充电宝', image: 'https://picsum.photos/id/22/100' },
          { name: '20元优惠券', image: 'https://picsum.photos/id/23/100' }
        ];
        
        if (Math.random() > 0.5) {
          const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
          showResult(true, randomPrize);
        } else {
          showResult(false);
        }
      }, 800);
    }
    
    // 摇一摇抽奖
    function shakeDevice() {
      const shakeBox = document.getElementById('shakeBox');
      shakeBox.classList.add('shake-animation');
      
      setTimeout(() => {
        shakeBox.classList.remove('shake-animation');
        
        const prizes = [
          { name: '智能手机', image: 'https://picsum.photos/id/96/100' },
          { name: '无线耳机', image: 'https://picsum.photos/id/21/100' },
          { name: '充电宝', image: 'https://picsum.photos/id/22/100' },
          { name: '100元代金券', image: 'https://picsum.photos/id/26/100' }
        ];
        
        if (Math.random() > 0.6) {
          const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
          showResult(true, randomPrize);
        } else {
          showResult(false);
        }
      }, 1000);
    }
    
    // 初始化设备摇动检测
    function initShakeDetection() {
      let lastX, lastY, lastZ;
      let lastTime;
      const threshold = 15; // 摇动阈值
      
      if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', (event) => {
          const acceleration = event.accelerationIncludingGravity;
          const currentTime = new Date().getTime();
          
          if (lastTime) {
            const timeDifference = currentTime - lastTime;
            
            if (timeDifference > 100) {
              const deltaX = acceleration.x - lastX;
              const deltaY = acceleration.y - lastY;
              const deltaZ = acceleration.z - lastZ;
              
              const speed = Math.abs(deltaX + deltaY + deltaZ) / timeDifference * 10000;
              
              if (speed > threshold && currentStyle === '4') {
                shakeDevice();
              }
            }
          }
          
          lastX = acceleration.x;
          lastY = acceleration.y;
          lastZ = acceleration.z;
          lastTime = currentTime;
        });
      }
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchStyle(style);
      });
    });
    
    // 关闭弹窗事件
    modalClose.addEventListener('click', () => {
      resultModal.classList.remove('show');
    });
    
    // 领取奖品事件
    claimPrize.addEventListener('click', () => {
      alert('奖品已领取，将尽快为您发放！');
      resultModal.classList.remove('show');
    });
    
    // 大转盘抽奖事件
    document.getElementById('startDraw1').addEventListener('click', spinWheel);
    document.getElementById('wheelSpinBtn').addEventListener('click', spinWheel);
    
    // 砸金蛋事件
    document.querySelectorAll('.golden-egg').forEach(egg => {
      egg.addEventListener('click', function() {
        crackEgg(this);
      });
    });
    
    // 翻牌事件
    document.querySelectorAll('.prize-card').forEach(card => {
      card.addEventListener('click', function() {
        if (!this.classList.contains('flipped')) {
          this.classList.add('flipped');
          
          // 判断是否中奖
          const cardNumber = this.getAttribute('data-card');
          const isWin = [1, 3, 4, 5, 7, 9].includes(parseInt(cardNumber));
          
          setTimeout(() => {
            if (isWin) {
              const prizeName = this.querySelector('.prize-name').textContent;
              const prizeImage = this.querySelector('img').src;
              showResult(true, { name: prizeName, image: prizeImage });
            } else {
              showResult(false);
            }
          }, 600);
        }
      });
    });
    
    // 重置卡牌事件
    document.getElementById('resetCards').addEventListener('click', () => {
      document.querySelectorAll('.prize-card').forEach(card => {
        card.classList.remove('flipped');
      });
    });
    
    // 摇一摇事件
    document.getElementById('shakeBtn').addEventListener('click', shakeDevice);
    
    // 签到事件
    document.getElementById('checkinBtn').addEventListener('click', function() {
      this.textContent = '已签到 +1';
      this.disabled = true;
      this.style.opacity = '0.7';
      
      // 显示签到奖励
      setTimeout(() => {
        showResult(true, { name: '1次抽奖机会', image: 'https://picsum.photos/id/30/100' });
      }, 500);
    });
    
    // 初始化
    initShakeDetection();
  </script>
</body>
</html>
